<template>
    <div>
        <div class="form-container">
            <el-steps simple :active="5" finish-status="success">
                <el-step title="填写基本信息"></el-step>
                <el-step title="实名认证"></el-step>
                <el-step title="业务授权"></el-step>
                <el-step title="关联对公账户"></el-step>
                <el-step title="注册成功"></el-step>
            </el-steps>
            <v-form-title title="注册成功"></v-form-title>
            <div class="tips">
                <p><i class="iconfont icon-wancheng"> </i>
                    <span>恭喜您注册成功!</span>
                    <span style="display: block;">恭喜您提交资料成功，请耐心等待工作人员审核成功后，进行账户绑定鉴权！</span>
                </p>
            </div>
            <p class="link"> 0{{time}}秒后跳转到
                <router-link tag="span" to="/login">登录页</router-link>
            </p>
        </div>
    </div>
</template>
<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator'

  import vFormTitle from '@/components/form-title'

  @Component({
    components: {
      vFormTitle
    }
  })
  export default class Step3 extends Vue {
    time = 5
    timerId = null

    mounted () {
      if (this.timerId) {
        clearInterval(this.timerId)
      }
      this.timerId = setInterval(_ => {
        this.time -= 1
        if (this.time < 1) {
          this.$router.push('/login')
          clearInterval(this.timerId)
        }
      }, 1000)
    }
  }
</script>

<style lang="less" scoped>
    .form-container {
        width: 1180px;
        margin: 0 auto;
        padding: 60px 0 30px;
    }

    .el-steps {
        margin-bottom: 60px;
    }

    .tips {
        margin-top: 50px;
        text-align: center;
        i {
            color: #5CB87A;
            font-size: 60px;
            vertical-align: middle;
            margin-right: 20px;
        }
        p {
            color: #333;
            font-size: 30px;
            line-height: 60px;
        }
    }
    .link {
        margin-top: 200px;
        text-align: center;
        span {
            color: #409EFF;
            cursor: pointer;
        }
    }
</style>
